<template>
	<view class="uiwu">
		<view class="items uiwu-flex-space">
			<text>背景音乐</text>
			<switch :checked="userInfo.is_open_music == 1 ? true : false" style="transform: scale(0.7);"
				@change="setSysConfig" :color="css.colorRed" />
		</view>
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/user/about')">
			<text>关于</text>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/login/agreement')">
			<text>用户协议</text>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/login/privacy')">
			<text>隐私政策</text>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<!-- #ifdef APP -->
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/login/beian')">
			<text>备案号：{{ app.site_beian }}</text>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<!-- #endif -->

	</view>
</template>

<script setup lang="ts">
import { inject, toRef, toRefs } from "vue";
import { uiwu, useredit } from '@/api/interface/interface';
import { configStore } from '@/store/configStore';
import { userStore } from "@/store/userStore";
import { useCssStore } from "@/store/cssStore";
const { userInfo } = toRefs(userStore())
const { app } = toRefs(configStore());
const { css } = useCssStore();


const setSysConfig = async (): Promise<any> => {
	const result = await useredit({
		field: 'is_open_music',
		value: userInfo.value.is_open_music == 1 ? 0 : 1
	})
	if (!result) return
	uiwu.toast('设置成功')
	const { updateUserInfo } = userStore();
	updateUserInfo();
}

</script>

<style lang="scss">
page {
	background-color: #e6e6ee;
}

.uiwu {}

.items {
	margin: 20rpx 0;
	padding: 40rpx 32rpx;
	background-color: #fff;
}

.item {
	padding: 40rpx 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #e6e6e6;

	text {
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;
	}

	&:last-child {
		border-bottom: 0;
	}
}
</style>
